<template>
  <view class="login-container">
    <!-- 高级粒子背景 -->
    <view class="particles">
      <view class="particle" v-for="(item, index) in particles" :key="index" :style="item.style"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 标题和logo -->
      <view class="header">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="title animate__animated animate__fadeInDown">大辛辅导班</text>
        <text class="subtitle animate__animated animate__fadeInDown animate__delay-1s">智慧学习平台</text>
      </view>
      
      <!-- 年级选择 -->
      <view class="grade-selector animate__animated animate__fadeInUp animate__delay-1s">
        <text class="selector-title">请选择您的年级</text>
        <view class="grade-grid">
          <view 
            v-for="grade in grades" 
            :key="grade.value" 
            class="grade-item"
            :class="{active: selectedGrade === grade.value}"
            @click="selectGrade(grade.value)"
          >
            <text>{{grade.label}}</text>
            <view class="grade-hover-effect"></view>
          </view>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn animate__animated animate__fadeInUp animate__delay-2s"
        :class="{active: selectedGrade, pulse: selectedGrade}"
        :disabled="!selectedGrade"
        @click="showAdminLogin"
      >
        <text>进入学习</text>
        <view class="btn-arrow">
          <uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
        </view>
        <view class="btn-hover-effect"></view>
      </button>
    </view>
    
    <!-- 管理员登录弹窗 -->
    <uni-popup ref="adminPopup" type="dialog">
      <uni-popup-dialog 
        mode="base" 
        title="管理员登录" 
        :before-close="true"
        @confirm="adminLogin"
        @close="closeAdminLogin"
      >
        <view class="admin-form">
          <uni-forms ref="adminForm" :model="adminData" :rules="adminRules">
            <uni-forms-item label="账号" name="username">
              <uni-easyinput 
                v-model="adminData.username" 
                placeholder="请输入管理员账号" 
                :inputBorder="false"
              />
            </uni-forms-item>
            <uni-forms-item label="密码" name="password">
              <uni-easyinput 
                v-model="adminData.password" 
                placeholder="请输入密码" 
                type="password" 
                :inputBorder="false"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    // 生成粒子背景数据
    const particles = Array.from({length: 30}, (_, i) => ({
      style: {
        top: `${Math.random() * 100}%`,
        left: `${Math.random() * 100}%`,
        width: `${Math.random() * 10 + 5}px`,
        height: `${Math.random() * 10 + 5}px`,
        opacity: Math.random() * 0.5 + 0.1,
        animationDuration: `${Math.random() * 20 + 10}s`,
        animationDelay: `${Math.random() * 5}s`
      }
    }))
    
    return {
      particles,
      grades: [
        {label: '一年级', value: '一年级'},
        {label: '二年级', value: '二年级'},
        {label: '三年级', value: '三年级'},
        {label: '四年级', value: '四年级'},
        {label: '五年级', value: '五年级'},
        {label: '六年级', value: '六年级'},
        {label: '七年级', value: '七年级'},
        {label: '八年级', value: '八年级'},
        {label: '九年级', value: '九年级'}
      ],
      selectedGrade: null,
      adminData: {
        username: '',
        password: ''
      },
      adminRules: {
        username: {
          rules: [{required: true, errorMessage: '请输入账号'}]
        },
        password: {
          rules: [{required: true, errorMessage: '请输入密码'}]
        }
      }
    }
  },
  onLoad() {
    // 检查是否有缓存的年级
    const cachedGrade = uni.getStorageSync('cachedGrade')
    if (cachedGrade) {
      this.selectedGrade = cachedGrade
      // 自动跳转（如果需要）
      // uni.redirectTo({ url: '/pages/home/index?grade=' + cachedGrade })
    }
  },
  methods: {
    selectGrade(grade) {
      this.selectedGrade = grade
    },
    showAdminLogin() {
      if (!this.selectedGrade) return
      
      // 检查是否有缓存的年级
      const cachedGrade = uni.getStorageSync('cachedGrade')
      if (cachedGrade && cachedGrade === this.selectedGrade) {
        // 有缓存且年级匹配，直接跳转
        uni.redirectTo({
          url: '/pages/index/index?grade=' + this.selectedGrade
        })
      } else {
        // 没有缓存或年级不匹配，显示管理员登录
        this.$refs.adminPopup.open()
      }
    },
    closeAdminLogin() {
      this.$refs.adminPopup.close()
      this.adminData = {username: '', password: ''}
    },
    async adminLogin(done) {
      try {
        const valid = await this.$refs.adminForm.validate()
        if (valid) {
          // 这里模拟验证管理员账号密码
          if (this.adminData.username === 'admin' && this.adminData.password === '123456') {
                  // 保存年级到本地缓存
                  uni.setStorageSync('cachedGrade', this.selectedGrade)
                  
                  uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                  })
                  setTimeout(() => {
                    uni.redirectTo({
                      url: '/pages/index/index?grade=' + this.selectedGrade
                    })
                    done()
                  }, 1500)
                } else {
            uni.showToast({
              title: '账号或密码错误',
              icon: 'none'
            })
            done(false)
          }
        } else {
          done(false)
        }
      } catch (e) {
        done(false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 引入animate.css动画库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
// @import url('../../static/animate.css');

.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ffc5ef 0%, #7bb9f1 50%, #5ab3da 100%); 
  overflow: hidden;
  
  /* 高级粒子背景 */
  .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    .particle {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      filter: blur(1px);
      animation: floatParticle infinite ease-in-out;
      
      @keyframes floatParticle {
        0%, 100% {
          transform: translateY(0) translateX(0) rotate(0deg);
        }
        50% {
          transform: translateY(-100px) translateX(50px) rotate(180deg);
        }
      }
    }
  }
  
  .main-content {
    position: relative;
    width: 80%;
    max-width: 800px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
    transform: translateY(0);
    animation: fadeInUp 0.8s ease-out;
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      
      .logo {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
        transition: all 0.5s ease;
		border-radius: 50%;
        
        &:hover {
          transform: rotate(15deg) scale(1.1);
        }
      }
      
      .title {
        display: block;
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }
      
      .subtitle {
        display: block;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 2px;
      }
    }
    
    .grade-selector {
      margin-bottom: 30px;
      
      .selector-title {
        display: block;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
        text-align: center;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      
      .grade-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        
        .grade-item {
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          font-size: 20px;
          color: rgba(255, 255, 255, 0.9);
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          
          .grade-hover-effect {
            position: absolute;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.6s ease;
            opacity: 0;
          }
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            
            .grade-hover-effect {
              width: 300px;
              height: 300px;
              opacity: 1;
            }
          }
          
          &.active {
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.8) 0%, rgba(37, 117, 252, 0.8) 100%);
            color: white;
            font-weight: bold;
            box-shadow: 0 10px 25px rgba(106, 17, 203, 0.4);
            transform: translateY(-5px);
            
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
              border-radius: 15px;
            }
          }
        }
      }
    }
    
    .login-btn {
      width: 100%;
      height: 70px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 15px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      
      .btn-hover-effect {
        position: absolute;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.6s ease;
        opacity: 0;
      }
      
      &:hover {
        .btn-hover-effect {
          width: 500px;
          height: 500px;
          opacity: 0.3;
        }
      }
      
      &.active {
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.8) 0%, rgba(37, 117, 252, 0.8) 100%);
        color: white;
        box-shadow: 0 10px 25px rgba(106, 17, 203, 0.4);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 15px 30px rgba(106, 17, 203, 0.5);
        }
        
        &:active {
          transform: scale(0.98);
        }
      }
      
      &.pulse {
        animation: pulse 2s infinite;
      }
      
      .btn-arrow {
        margin-left: 15px;
        transition: all 0.3s ease;
      }
      
      &:hover.active .btn-arrow {
        transform: translateX(10px);
      }
    }
  }
  
  /* 管理员弹窗样式 */
  ::v-deep .uni-popup__wrapper {
    border-radius: 20px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    
    .uni-popup__title {
      font-size: 24px !important;
      color: #333 !important;
      padding: 20px 0 10px !important;
    }
    
    .uni-popup__close {
      top: 20px !important;
      right: 20px !important;
      color: #666 !important;
    }
    
    .uni-popup__btn {
      font-size: 16px !important;
      padding: 10px 0 !important;
    }
  }
  
  .admin-form {
    padding: 20px;
    
    ::v-deep .uni-forms-item__label {
      font-weight: bold;
      color: #555 !important;
      font-size: 16px !important;
    }
    
    ::v-deep .uni-easyinput {
      background: rgba(255, 255, 255, 0.8) !important;
      border-radius: 10px !important;
      padding: 0 15px !important;
      // height: 50px !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
      
      &:focus-within {
        box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3) !important;
      }
    }
  }
}

/* 自定义动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(106, 17, 203, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(106, 17, 203, 0);
  }
}
</style>